<!--
 * @Author: your name
 * @Date: 2020-10-21 09:24:15
 * @LastEditTime: 2020-11-11 11:04:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\captcha\Captcha.vue
-->
<template>
<div>
<button id="TencentCaptchaBtn"
     data-appid="1258418548"
     data-cbfn="callback"
     type="button"
>验证</button>
</div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.init();
            new TencentCaptcha(document.getElementById('TencentCaptchaBtn'));
            
        })
    },
    methods:{
        init(){
             window.callback = function(res){
                console.log(res)
                // res（用户主动关闭验证码）= {ret: 2, ticket: null}
                // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
                if(res.ret === 0){
                    alert(res.ticket)   // 票据
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
#TencentCaptchaBtn{
    width: 120px;
    height: 70px;
    background: #ff3020;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .3);
    color:#fff;
    margin: 100px;
    border-radius: 10px;
    font-size: 28px;
}
</style>